<template>
  <wd-config-provider
    :themeVars="themeVars"
    :theme="themeStore.getCurrentTheme"
    style="min-height: 100%"
  >
    <slot />
    <wd-toast />
    <wd-notify />
    <wd-message-box />
    <!-- 升级组件 -->
    <ea-upgrader :immediate="true" />
  </wd-config-provider>
</template>

<script lang="ts" setup>
  import type { ConfigProviderThemeVars } from 'wot-design-uni';

  import { EaUpgrader } from '@/components/ea-upgrader';
  import { useSkinStore } from '@/store/modules/skin';
  import { themeInfo, useThemeStore } from '@/store/modules/theme';

  const themeStore = useThemeStore();
  const skinStore = useSkinStore();

  const lightTextStyle = ref(themeInfo.light.textStyle);
  const lightBackground = ref(themeInfo.light.backgroundColor);
  const darkTextStyle = ref(themeInfo.dark.textStyle);
  const darkBackground = ref(themeInfo.dark.backgroundColor);

  const themeVars = computed<ConfigProviderThemeVars>(() => {
    return {
      colorTheme: skinStore.getCurrentStyle?.themeColor,
      // buttonPrimaryBgColor: '#07c160',
      // buttonPrimaryColor: '#07c160',
    };
  });
</script>

<style lang="scss">
  /* 主题设置 */
  .wot-theme-light {
    color: v-bind(lightTextStyle);
    background: v-bind(lightBackground);
  }
  // 开启 Wot 的深色模式只会影响 Wot 组件的 UI，并不会影响全局的文字颜色或背景颜色，你可以参考以下 CSS 来设置一些全局样式。
  .wot-theme-dark {
    color: v-bind(darkTextStyle);
    background: v-bind(darkBackground);
  }
</style>
